<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <!-- logo -->
      <div class="login-head">
        <div class="logo"></div>
      </div>
      <!-- 表单 -->
      <el-form ref="theForm" :model="form" class="login-form" :rules="rules" >
        <el-form-item prop="mobile">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>

        <el-form-item prop="code">
          <el-input v-model="form.code"></el-input>
        </el-form-item>

        <el-form-item prop="isAgree">
          <el-checkbox label="我已阅读并同意用户协议和隐私条款" name="type" v-model="form.isAgree"></el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login-btn" @click.prevent="hLogin" :loading="loading">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    var agreeIt = function (rule, value, callback) {
      if (value === false) {
        callback(new Error('未同意用户协议和隐私条款无法登陆'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      form: {
        isAgree: false,
        mobile: '13911111111', // 手机号
        code: '246810' // 密码
      },
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请输入合法的手机号', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' }
        ],
        isAgree: [
          { validator: agreeIt, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    hLogin () {
      // 表单验证
      this.$refs.theForm.validate(okk => {
        // 验证成功
        if (okk) {
          this.doLogin()
        }
      })
    },
    async doLogin () {
      // 按钮登录中禁用
      this.loading = true
      // 解构赋值
      const { mobile, code } = this.form
      // 提交数据
      try {
        const res = await this.$axios.post('/mp/v1_0/authorizations', { mobile, code })
        console.log(res)
        this.$message({
          message: '登录成功',
          type: 'success'
        })
        // 取消按钮禁用
        this.loading = false
        // token
        localStorage.token = res.data.data.token
        // 跳转页面
        this.$router.push('/')
      } catch (err) {
        console.log(err)
        this.$message.error('登录失败')
        // 取消按钮禁用
        this.loading = false
      }
    }

  }
}
</script>
<style scoped lang="less">
  // 铺满整屏
  .login-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../../assets/login_bg.jpg") no-repeat;
    background-size: cover;

    .login-form-wrap {
      min-width: 300px;
      padding: 30px 50px 10px;
      background-color: #fff;

      .login-head {
        display: flex;
        justify-content: center;

        .logo {
          width: 200px;
          height: 57px;
          background: url("../../assets/logo_index.png") no-repeat;
          background-size: contain;
        }
      }

      .login-form {
        .login-btn {
          width: 100%;
        }
      }
    }
  }
</style>
